<template>
  <div>
    <el-drawer
      v-model="hospitalVisit"
      size="300px"
      title="选择医院"
      :with-header="false"
    >
      <el-input
        v-model="hospitalName"
        placeholder="请输入内容"
        prefix-icon="search"
        @change="doAllHospitalId"
      ></el-input>
      <el-scrollbar :height="height" style="margin-top: 10px">
        <div
          v-for="(item, index) in hospitalList"
          :key="index"
          class="scrollbar-demo-item"
          @click="chooseHospital(item)"
        >
          <div class="content">
            <div>{{ item.name }}</div>
            <div>
              {{ item.date }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>

    <el-drawer
      v-model="sectionVisit"
      size="300px"
      title="选择医院"
      :with-header="false"
    >
      <el-input placeholder="请输入内容" prefix-icon="search"></el-input>
      <el-scrollbar :height="height" style="margin-top: 10px">
        <div
          v-for="(item, index) in sectionList"
          :key="index"
          class="scrollbar-demo-item"
          @click="chooseSection(item)"
        >
          <div class="content">
            <div>{{ item.name }}</div>
            <div>
              {{ item.date }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>

    <el-drawer
      v-model="doctorVisit"
      size="300px"
      title="选择医生"
      :with-header="false"
    >
      <el-input
        v-model="doctorName"
        placeholder="请输入内容"
        prefix-icon="search"
        @change="doAllDoctorId"
      ></el-input>
      <el-scrollbar :height="height" style="margin-top: 10px">
        <div
          v-for="(item, index) in doctorList"
          :key="index"
          class="scrollbar-demo-item"
          @click="chooseDoctor(item)"
        >
          <div class="content">
            <div>{{ item.name }}</div>
            <div>
              {{ item.date }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>

    <return-bar name="挂号"></return-bar>
    <div class="info">
      <div class="info-item" @click="hospitalVisit = true">
        <div class="info-label">医院</div>
        <el-input
          v-model="currentHospital.name"
          disabled
          class="info-input"
        ></el-input>
      </div>
      <div class="info-item" @click="sectionVisit = true">
        <div class="info-label">科室</div>
        <el-input
          v-model="currentSection.name"
          disabled
          class="info-input"
        ></el-input>
      </div>
      <div class="info-item" @click="doctorVisit = true">
        <div class="info-label">医生</div>
        <el-input
          v-model="currentDoctor.name"
          disabled
          class="info-input"
        ></el-input>
      </div>
      <div class="info-item">
        <div class="info-label">预约时间</div>
        <el-date-picker
          v-model="date"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
          class="info-input"
          :disabled-date="disabledDate"
        ></el-date-picker>
      </div>
    </div>

    <el-button class="button" @click="doAdd">挂号</el-button>
  </div>
</template>

<script>
import ReturnBar from "@/components/ReturnBar.vue";
import { allHospitalId } from "@/api/hospital";
import { allSectionId } from "@/api/section";
import { allUserId } from "@/api/user";
import { add } from "@/api/registration";

export default {
  components: { ReturnBar },
  name: "",
  data() {
    return {
      hospitalVisit: false,
      hospitalName: "",
      currentHospital: {
        id: 0,
        name: "",
      },
      sectionVisit: false,
      sectionName: "",
      currentSection: {
        id: 0,
        name: "",
      },
      doctorVisit: false,
      doctorName: "",
      currentDoctor: {
        id: 0,
        name: "",
      },
      date: "",
      hospitalList: [],
      sectionList: [],
      doctorList: [],
    };
  },
  methods: {
    doAllHospitalId() {
      allHospitalId({
        name: this.hospitalName,
      }).then((res) => {
        this.hospitalList = res.data;
      });
    },
    doAllSectionId() {
      this.currentSection = {
        id: 0,
        name: "",
      };
      allSectionId({
        name: this.sectionName,
        hospitalId: this.currentHospital.hospitalId,
      }).then((res) => {
        this.sectionList = res.data;
      });
    },
    doAllUserId() {
      this.currentUser = {
        id: 0,
        name: "",
      };
      allUserId({
        name: this.doctorName,
        date: this.date,
        sectionId: this.currentSection.sectionId,
      }).then((res) => {
        this.doctorList = res.data;
      });
    },
    doAdd() {
      add({
        doctorId: this.currentDoctor.userId,
        isAppointment: 1,
        isComplete: 0,
        isPayment: 0,
        date: this.date
      }).then((res) => {
        this.$router.go(-1);
      });
    },

    chooseHospital(value) {
      this.currentHospital = value;
      this.doAllSectionId();
      this.hospitalVisit = false;
    },
    chooseSection(value) {
      this.currentSection = value;
      this.sectionVisit = false;
    },
    chooseDoctor(value) {
      this.currentDoctor = value;
      this.doctorVisit = false;
    },

    disabledDate(time) {
      return this.formatDate(time) < this.formatDate(new Date());
    },

    formatDate(value) {
      var year = value.getFullYear();
      var month = value.getMonth() + 1;
      var day = value.getDate();

      if (month < 10) {
        month = "0" + month;
      }

      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    },
  },
  created() {
    this.doAllHospitalId();
  },
  watch: {
    date: function (newValue, oldValue) {
      this.doAllUserId();
    }
  }
};
</script>

<style scoped>
.info {
  color: #80a492;
  border-radius: 10px;
  width: 275px;
  background-color: rgba(213, 235, 225, 0.5);
  margin: 20px;
  padding: 20px;
}

.info-item {
  display: flex;
  margin: 10px 0;
}

.info-label {
  width: 125px;
}

.button {
  margin: 20px;
  color: #80a49e;
}

.info-input {
  width: 220px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  /* margin-top: 10px; */
  text-align: center;
  border-radius: 4px;
  border-bottom: 1px #80a492 solid;
  background: #ffffff;
  color: #80a492;
}
</style>